<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>实时监控平台</title>
  <link rel="stylesheet" type="text/css" href="/js/libs/bootstrap-3.2.0/css/bootstrap.min.css"/>
  <link rel="stylesheet" type="text/css" href="/js/libs/bootstrap-3.2.0/css/bootstrap-theme.min.css"/>

  <script type="text/javascript" src="/js/libs/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="/js/libs/bootstrap-3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    function initText() {

      $('#l_user').blur(function () {
        var txt1_value = $('#l_user').val();
        if (txt1_value == "") {
          $('#l_user').css('color', '#CCC');
          $(this).val('用户名');
        }
      });

      $('#l_code').focus(function () {
        $('#l_code').css('color', '#000');
        var txt1_value = $('#l_code').val();
        if (txt1_value == "验证码") {
          $(this).val('');
        }
      });
      $('#l_code').blur(function () {
        var txt1_value = $('#l_code').val();
        if (txt1_value == "") {
          $('#l_code').css('color', '#CCC');
          $(this).val('验证码');
        }
      });

      $('#l_pwd').hide();
      var $txt2_obj = $('#l_user_pwd');
      var $pswd_obj = $('#l_pwd');
      $txt2_obj.focus(function () {
        $pswd_obj.show().focus();//使密码输入框获取焦点
        $txt2_obj.hide();//隐藏文本输入框
      });
      $pswd_obj.blur(function () {
        if ($pswd_obj.val() == '') {
          $txt2_obj.show();
          $pswd_obj.hide();
        }
      })
    }


    $().ready(function () {
      initText();
      $("#l_login").click(function () {
        login();
      });


      document.onkeypress = function (event) {
        event = window.event || event;
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        if (keyCode == 13) {
          login();
        }
      }
    });

    function login() {
      var user = $("#l_user").val();
      var pwd = $("#l_pwd").val();
      var code = $("#l_code").val();
      if (user == '' || pwd == '' || user == '用户名') {
        $("#l_msg").html("<h8 style=\"color: red\">用户名或密码不能为空！</h8>");
        cleaninput();
        return;
      }
      if (code == '') {
        $("#l_msg").html("<h8 style=\"color: red\">请填写验证码！</h8>");
      }

      cleaninput();
      $("#l_msg").html('');
      var url = basePath + "wanmei/login/checkLogin?uname=" + user + "&upwd=" + pwd + "&code=" + code;
      $.ajax({
        url: url,
        dateType: 'json',
        type: 'POST',
        success: function (results) {
          if (results.a == 'success') {
            post(basePath + "wanmei/login/turn_index");
          } else {
            $('#img_code').attr('src', 'wanmei/login/create_code?ys=' + new Date().getTime());
            $("#l_msg").html("<h8 style=\"color: red\">" + results.a + "</h8>");
          }
        },
        error: function (e) {
          alert("登录验证失败!");
        }
      });

    }

    function cleaninput() {
      $("#l_user").val('用户名');
      $("#l_user_pwd").val('密码');
      $("#l_code").val('验证码');
      $('#l_user').css('color', '#CCC');
      $('#l_user_pwd').css('color', '#CCC');
      $('#l_code').css('color', '#CCC');
      $("#l_user_pwd").show();

      $('#l_pwd').hide();
      $("#l_pwd").val('');

    }

    function post(URL, PARAMS) {
      var temp = document.createElement("form");
      temp.action = URL;
      temp.method = "POST";
      temp.style.display = "none";
      document.body.appendChild(temp);
      temp.submit();
      return temp;
    }

  </script>


</head>

<body>
<div style="text-align: center;">
  <div class="container">
    <div class="form-signin">
      <h2 class="form-signin-heading">手游统计平台</h2>

      <label id="l_msg" class="checkbox"></label>

      <input type="text" id="l_user" class="input-block-level" value="用户名"
             style="font-size: 16px;height: auto;margin-bottom: 15px;padding: 7px 9px">

      <input type="text" id="l_user_pwd" class="input-block-level" value="密码"
             style="font-size: 16px;height: auto;margin-bottom: 15px;padding: 7px 9px">

      <input type="password" id="l_pwd" class="input-block-level"
             style="font-size: 16px;height: auto;margin-bottom: 15px;padding: 7px 9px">

      <label>
        <input type="text" id="l_code" class="input-block-level" value="验证码"
               style="font-size: 16px;height: auto;margin-bottom: 15px;padding: 7px 9px;width: 30%">
        <img id='img_code' src="wanmei/login/create_code"
             onclick="this.src='wanmei/login/create_code?ys='+new Date().getTime()" style="margin-bottom: 15px">
      </label>
      <button id="l_login" class="btn btn-large btn-primary">登录</button>

    </div>
  </div>
</div>
</body>
</html>
